<template>
<div class="btn-box">
  <mu-flexbox :gutter="0">
    <mu-flexbox-item class="flex-item">
      <mu-flat-button label="通过" class="flat-button button-left" :color="btn_c_o" :backgroundColor="btn_bg_o" rippleColor="#b39ddb" :rippleOpacity="0.2" @click="pitchOn"/>
    </mu-flexbox-item>
    <mu-checkbox :value='chooseStatus' class="group-checkbox"/>
    <mu-flexbox-item class="flex-item">
      <mu-flat-button label="屏蔽" class="flat-button button-right" :color="btn_c_t" :backgroundColor="btn_bg_t" rippleColor="#ffcdd2" :rippleOpacity="0.2" @click="giveUp"/>
    </mu-flexbox-item>
  </mu-flexbox> 
</div>
</template>
<script>
  import http from "../http/http.js" 
  export default {
    props:['data','id','chooseStatus'],
    data () {
      return {
        buttonData:{},
        btn_bg_o:'#ffffff',
        btn_bg_t:'#ffffff',
        btn_c_o:'#000000',
        btn_c_t: '#000000',

        checkData:'', //会将data付给checkData
        pictureCheckUrl:'http://www.meimei.com/checkPicture'
      }
      
    },
    components : {
    },
    methods: {
      //选中
      pitchOn: function(){
        var that = this
        http.post(that.pictureCheckUrl,{
          picture_id:this.id,
          picture_check:1,
        })
        .then(function(response){
          if(response.data.code == 200){
            that.checkData = 1
          }
        })
        .catch(function(err){console.log(err)});
      },
      //屏蔽
      giveUp: function(){
        var that = this
        http.post(that.pictureCheckUrl,{
          picture_id:this.id,
          picture_check:2,
        })
        .then(function(response){
          if(response.data.code == 200){
            that.checkData = 2
          }
        })
        .catch(function(err){console.log(err)});
      },
      check:function(checkData){
        if(checkData == 0){  // 未审核
        // this.buttonData.isShow = true

        this.btn_bg_o = '#ffffff'
        this.btn_c_o = '#000000'
        this.btn_bg_t = '#ffffff'
        this.btn_c_t = '#000000'
        this.buttonData.value = 0
      }else if(checkData == 1){  //通过
        // this.buttonData.isShow = false
        this.buttonData.value = 1
        this.btn_bg_o = '#4BAF4F'
        this.btn_c_o = '#ffffff'
        this.btn_bg_t = '#ffffff'
        this.btn_c_t = '#000000'
      }else if(checkData == 2){  //屏蔽
        // this.buttonData.isShow = false
        this.buttonData.value = 2
        this.btn_bg_o = '#ffffff'
        this.btn_c_o = '#000000'
        this.btn_bg_t = '#F44235'
        this.btn_c_t = '#ffffff'
      }else{
        console.log("出现错误")
      }
      }
    },
    mounted() {
      this.checkData = this.data
      this.check(this.checkData)
      
    },
    watch:{
      checkDataWatch(val,oldVal){
        this.$emit("update:data", val)
        this.check(val)
      },
      dataWatch(val,oldVal){
        this.checkData = val
        this.check(this.checkData)
      }
    },
    computed:{
      checkDataWatch:function(){
          return this.checkData;
      },
      dataWatch:function(){
          return this.data;
      }
    }
  }
</script>

<style lang="css">
.btn-box{
  display: inline-block;
  width:100%;
  overflow:hidden;
  border-radius: 6px;
}
.flex-item {
  height: 32px;
  /*background-color: #e0e0e0;*/
  text-align: center;
  line-height: 32px;
}
.flat-button{
  width: 100%;
  height:100%;
  border: 1px solid #e0e0e0;
}
.button-left{
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}
.button-right{
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
}
.group-checkbox{
  margin-right: 12px;
}
</style>